<template>
  <header class="header">
    <div class="logo">
      <img src="@/assets/image/logo.png" />
    </div>
    <div class="search" @click="goSearch">
      <i class="iconfont icon-iconfont-seach"></i>
      <span>搜您喜欢的 ...</span>
    </div>
    <div class="service">
      <i class="iconfont icon-customer-service"></i>
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {};
  },
  methods: {
    goSearch() {
      this.$router.push("/search");
    },
  },
};
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 1.2rem;
  background-color: #b0352f;

  .logo {
    height: 1.2rem;
    width: 1.5rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .search {
    display: flex;
    align-items: center;
    font-size: 0.5rem;
    padding-left: 0.3125rem;
    color: #ccc;
    background-color: #fff;
    width: 6.8rem;
    height: 0.8rem;
    border-radius: 18px;

    i {
      font-size: 0.5rem;
      margin-right: 0.1875rem;
    }
  }

  .service {
    i {
      font-size: 0.75rem;
      color: #fff;
      margin-right: 0.1875rem;
    }
  }
}
</style>
